/*
* @Author: syq
* @Date:   2017-12-04 18:20:44
* @Last Modified by:   shenyanqiu
* @Last Modified time: 2017-12-05 17:09:00
*/
import React from 'react';
import { Select,Form, Row, Col, Input, Button, Icon, DatePicker } from 'antd';

import styles from './TopOperation.less'
const Option = Select.Option;
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
class TopOperation extends React.Component {
  handleChange (value) {
    console.log(`selected ${value}`);
  }
  handleSearch(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      //提交搜索数据
      this.props.SearchData(values)
      // console.log('Received values of form: ', values);
    });
  }
  render () {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    const rangeConfig = {
      rules: [{ type: 'array', message: 'Please select time!' }],
    };
    const { designation, status, ownership, section, starlevel, object: obj, time, textAlgin }=this.props;
    return(
      <Form
        style={{textAlign: `${textAlgin}`}}
         layout="inline"
         className="ant-advanced-search-form"
         onSubmit={this.handleSearch.bind(this)}
       >
       {
        designation
        ? <FormItem label="名称" hasFeedback>
            {getFieldDecorator('username', {
            rules: [{  message: '输入不为空!' }],
          })(<Input />)}
          </FormItem>
        : ''
       }
       {
        status
        ? <FormItem label="状态">
            {getFieldDecorator('status', {
            rules: [{  message: '请选择' }],
          })(<Select placeholder="请选择" className={styles.selectWidth}>
                <Option value="all">全部</Option>
                <Option value="ownership1">所属1</Option>
                <Option value="ownership2">所属2</Option>
              </Select>)}
          </FormItem>
        :''
       }

      {
        ownership
        ? <FormItem
            label="所属"
          >
            {getFieldDecorator('ownership', {
              rules: [
                { message: '请选择!' }
              ],
            })(
              <Select placeholder="请选择" className={styles.selectWidth}>
                <Option value="all">全部</Option>
                <Option value="ownership1">所属1</Option>
                <Option value="ownership2">所属2</Option>
              </Select>
            )}
          </FormItem>
      : ''
      }
      {
        section
        ? <FormItem
            label="部门"
          >
            {getFieldDecorator('section', {
              rules: [
                { message: '请选择!' }
              ],
            })(
              <Select placeholder="请选择" className={styles.selectWidth}>
                <Option value="xinwen">新闻部门</Option>
                <Option value="zuzhi">组织部</Option>
                <Option value="xuanchuan">宣传</Option>
              </Select>
            )}
          </FormItem>
      : ''
      }

        {
          starlevel
            ? <FormItem
              label="星级"
            >
              {getFieldDecorator('starlevel', {
                rules: [
                  { message: '请选择!' }
                ],
              })(
                <Select placeholder="请选择星级" className={styles.selectWidth}>
                  <Option value="1">★☆☆☆☆</Option>
                  <Option value="2">★★☆☆☆</Option>
                  <Option value="3">★★★☆☆</Option>
                  <Option value="4">★★★★☆</Option>
                  <Option value="5">★★★★★</Option>
                </Select>
              )}
            </FormItem>
            : ''
        }

      {
        time
        ? <FormItem
            label="时间"
          >
            {getFieldDecorator('time', rangeConfig)(
              <RangePicker showTime format="YYYY-MM-DD" className={styles.rangePickerTimeStyle} />
            )}
          </FormItem>
        : ''
      }
      {
        obj
          ? <FormItem
              label={"对象"}
            >
            {getFieldDecorator('obj', {
              rules: [
                { message: '请选择!' }
              ],
            })(
              <Select placeholder="请选择" className={styles.selectWidth}>
                <Option value="0">请选择</Option>
                <Option value="1">人员</Option>
                <Option value="2">部门</Option>
                <Option value="3">社团</Option>
              </Select>
            )}
          </FormItem>
          : ''
      }
        <FormItem>
          <Button type="primary" htmlType="submit">搜索</Button>
        </FormItem>
      </Form>
      );
  }
}
export default Form.create()(TopOperation);
